<template>
<div class="max-w-[1440px] mx-auto bg-primary-300 text-white min-h-screen pt-12">
      <!-- 加载状态 -->
      <div v-if="loading" class="flex justify-center items-center h-[60vh]">
        <LoadingSpinner />
      </div>
      
      <!-- 电影详情 -->
      <div v-else-if="movie" id="main" class="bg-primary-300 p-6 text-black">
        <!-- 基本信息区域 -->
        <div class="flex rounded bg-white mx-4 py-6">
          <!-- 左侧海报 -->
          <div class="mx-6">
            <div class="" style="min-height: 259px; max-height: 300px; height: 274px;">
              <img 
                :src="movie.image_url || '/src/assets/images/nopicture.jpg'" 
                :alt="movie.movie_name"
                class="h-full w-full"
                referrerpolicy="no-referrer"
              >
            </div>
            <button 
              @click="handleCollect"
              class="text-white w-full px-4 py-1 mt-2 text-sm rounded border"
              :class="isCollected ? 'bg-gray-500 hover:bg-gray-600' : 'bg-blue-500 hover:bg-blue-600'"
            >
              {{ isCollected ? '取消收藏' : '收藏' }}
            </button>
          </div>
          
          <!-- 右侧信息 -->
          <div id="info" :data-movie-id="movie.id">
            <ul>
              <li class="text-lg font-semibold">{{ movie.movie_name }}</li>
              <li>导演: {{ movie.director }}</li>
              <li>编剧: {{ movie.scriptwriter }}</li>
              <li>主演: {{ movie.actors }}</li>
              <li>语言: {{ movie.language }}</li>
              <li>首播: {{ movie.release_date }}</li>
              <li v-if="movie.episodes">集数: {{ movie.episodes }}</li>
              <li>类型: {{ movie.types }}</li>
              <li>制片国家/地区: 
                <span v-if="movie.region === 1">中国大陆</span>
                <span v-else-if="movie.region === 2">中国香港</span>
                <span v-else-if="movie.region === 3">中国台湾</span>
                <span v-else-if="movie.region === 4">美国</span>
                <span v-else-if="movie.region === 5">韩国</span>
                <span v-else-if="movie.region === 6">日本</span>
                <span v-else>其他</span>
              </li>
              <li v-if="movie.alternate_name">又名: {{ movie.alternate_name }}</li>
              <li v-if="movie.rate">豆瓣评分: {{ movie.rate }}</li>
            </ul>
          </div>
        </div>
        
        <!-- 简介区域 -->
        <div class="rounded bg-white mx-4 my-4 py-6">
          <div class="px-6">
            <h1 class="text-lg mb-6 font-semibold">简介</h1>
            <p>{{ movie.review || movie.description }}</p>
          </div>
        </div>
        
        <!-- 下载信息区域 -->
        <div v-if="movie.download_info" id="download_info" class="rounded bg-white mx-4 mt-4 py-6">
          <h1 class="text-lg mb-6 font-semibold px-6">网盘地址</h1>
          <ul class="px-6">
            <li>{{ movie.download_info }}</li>
          </ul>
        </div>
      </div>
      
      <!-- 错误提示 -->
      <div v-else-if="error" class="text-center text-red-500 py-8">
        {{ error }}
      </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getMovieDetail } from '@/api/movie'
import { addCollect, removeCollect, checkCollect } from '@/api/collect'
import { isLoggedIn } from '@/utils/auth'
import { showToast } from '@/utils/toast'
import LoadingSpinner from '@/components/common/LoadingSpinner.vue'

const route = useRoute()
const router = useRouter()
const movie = ref(null)
const loading = ref(true)
const error = ref(null)
const isCollected = ref(false)

// 获取电影详情
const fetchMovieDetail = async () => {
  const movieId = route.params.id
  if (!movieId) {
    error.value = '电影ID不能为空'
    loading.value = false
    return
  }
  
  try {
    loading.value = true
    const response = await getMovieDetail(movieId)
    const res = response.data
    
    if (res.code === 200 && res.data) {
      movie.value = res.data
      // 如果用户已登录，检查收藏状态
      if (isLoggedIn()) {
        await checkCollectStatus()
      }
    } else if (res.code === 404) {
      error.value = '电影信息不存在'
    } else {
      error.value = res.message || '获取电影详情失败'
    }
  } catch (err) {
    console.error('获取电影详情失败:', err)
    error.value = '获取电影详情失败，请稍后重试'
  } finally {
    loading.value = false
  }
}

// 检查收藏状态
const checkCollectStatus = async () => {
  try {
    const response = await checkCollect(movie.value.id)
    const res = response.data
    if (res.code === 200) {
      isCollected.value = res.data.is_collected
    }
  } catch (error) {
    console.error('检查收藏状态失败:', error)
  }
}

// 处理收藏/取消收藏
const handleCollect = async () => {
  if (!isLoggedIn()) {
    showToast('请先登录', 'warning')
    router.push({
      path: '/login',
      query: { redirect: route.fullPath }
    })
    return
  }

  try {
    if (isCollected.value) {
      // 取消收藏
      const response = await removeCollect(movie.value.id)
      const res = response.data
      if (res.code === 200) {
        isCollected.value = false
        showToast('取消收藏成功', 'success')
      } else {
        showToast(res.message || '取消收藏失败', 'error')
      }
    } else {
      // 添加收藏
      const response = await addCollect(movie.value.id)
      const res = response.data
      if (res.code === 200) {
        isCollected.value = true
        showToast('收藏成功', 'success')
      } else {
        showToast(res.message || '收藏失败', 'error')
      }
    }
  } catch (error) {
    console.error('操作失败:', error)
    showToast('操作失败，请稍后重试', 'error')
  }
}

onMounted(() => {
  fetchMovieDetail()
})
</script> 